import "../styles/style.css";
import React from "react";
import { Chart as ChartJS, ArcElement, LinearScale,Tooltip, Legend } from "chart.js";
import { TextInput } from "react-native-web";
import { Scatter } from 'react-chartjs-2';

ChartJS.register( Tooltip, Legend);

// TODO
const add_new = (textjson) => {
  axios({
        method:'post',
        url: '/api/stalker/add',
        data: JSON.parse(textjson)
      })
};

const build_stalker_route = (startx, starty, endx, endy) => {
  console.log(startx, starty, endx, endy);
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.newHandler = this.newHandler.bind(this);
    this.startxHandler = this.startxHandler.bind(this);
    this.startyHandler = this.startyHandler.bind(this);
    this.endxHandler = this.endxHandler.bind(this);
    this.endyHandler = this.endyHandler.bind(this);

    this.state = {
      value: "",
      height: 800,
      startx: "",
      starty: "",
      endx: "",
      endy: ""
    };
  }

  updateSize = (height) => {
    this.setState({
      height
    });
  };

  newHandler(event) {
    this.setState({ textjson: event.target.value });
  }
  startxHandler(event) {
    this.setState({ startx: event.target.value });
  }
  startyHandler(event) {
    this.setState({ starty: event.target.value });
  }
  endxHandler(event) {
    this.setState({ endx: event.target.value });
  }
  endyHandler(event) {
    this.setState({ endy: event.target.value });
  }

  render() {
    const { value, height, startx, starty, endx, endy } = this.state;

    let newStyle = {
      height
    };

    return (
      <body className="main">
        <div
          style={{
            position: "fixed",
            top: "5%",
            left: "84%",
            backgroundColor: "#A4AC86"
          }}
        >
          <TextInput
            style={[newStyle]}
            placeholder="Input text"
            onChangeText={(value) => this.setState({ value })}
            editable={true}
            multiline={true}
            value={value}
            onContentSizeChange={(e) =>
              this.updateSize(e.nativeEvent.contentSize.height)
            }
          />
          <button
            style={{
              position: "fixed",
              top: "5%",
              left: "90%",
              borderRadius: "50px",
              borderWidth: "0",
              padding: "15px",
              backgroundColor: "#A4AC86"
            }}
            onClick={() => add_new(value)}
          >
            Submit
          </button>
        </div>
        <TextInput
          style={{
            position: "fixed",
            top: "5%",
            left: "95%",
            width: "3%",
            height: "3%",
            backgroundColor: "#A4AC86",
            fontSize: "18pt"
          }}
          placeholder="Start x:"
          onChangeText={(startx) => this.setState({ startx })}
          startx={startx}
        />
        <TextInput
          style={{
            position: "fixed",
            top: "9%",
            left: "95%",
            width: "3%",
            height: "3%",
            backgroundColor: "#A4AC86",
            fontSize: "18pt"
          }}
          placeholder="Start y:"
          onChangeText={(starty) => this.setState({ starty })}
          starty={starty}
        />
        <TextInput
          style={{
            position: "fixed",
            top: "17%",
            left: "95%",
            width: "3%",
            height: "3%",
            backgroundColor: "#A4AC86",
            fontSize: "18pt"
          }}
          placeholder="End x:"
          onChangeText={(endx) => this.setState({ endx })}
          endx={endx}
        />
        <TextInput
          style={{
            position: "fixed",
            top: "21%",
            left: "95%",
            width: "3%",
            height: "3%",
            backgroundColor: "#A4AC86",
            fontSize: "18pt"
          }}
          placeholder="End y:"
          onChangeText={(endy) => this.setState({ endy })}
          endy={endy}
        />
        <button
          style={{
            position: "fixed",
            top: "13%",
            left: "95%",
            width: "3%",
            height: "3%",
            borderRadius: "50px",
            borderWidth: "0",
            backgroundColor: "#A4AC86"
          }}
          onClick={() => build_stalker_route(startx, starty, endx, endy)}
        >
          Submit
        </button>
        <div style={{position: "fixed", top: "0", left: "0", width: "70%", height: "100%"}}>
        <img
          style={{objectFit: "contain"}}
          src="https://dt.miet.ru/shared_folder/map.png"
          alt="new"
        />
        </div>
      </body>
    );
  }
}

export default App;
